<template>
	<view class="purchase-body">
		<view class="mod-custom-bar">
			<view class="custom-black" @click="back">
				<text class="cuIcon-back"></text><text>返回</text>
			</view>
			<view class="custom-content">
				<text>采购申请</text>
			</view>
		</view>
		<view class="step-bar">
			<view class="step-box " :class="[currentStep=='step1'?'step-box-active':'']" data-name='step1' @click="changeModule">
				基础信息
			</view>
			<view class="step-box" :class="[currentStep=='step2'?'step-box-active':'']"  data-name='step2' @click="changeModule">
				附属信息
			</view>
			<view class="step-box" :class="[currentStep=='step3'?'step-box-active':'']" data-name='step3' @click="changeModule">
				采购附件
			</view>
		</view>
		<view class="">
		  <step1 :cgId='cgId' :status='status' v-if="currentStep=='step1'"></step1>
		  <step2 :cgId='cgId' :status='status' v-if="currentStep=='step2'"></step2>
		  <step3 :cgId='cgId' :status='status' v-if="currentStep=='step3'"></step3>
		</view>
		<!-- 底部测试操作 --> 
	   <view class="options-bar">
	   	 <view class="options-content">
	   	 	<view class="option-box box-default" type='default' @click="lookRemark">
	   	 		审批记录
	   	 	</view>
			<view class="option-box box-danger"  v-if="status!='Finished'&&status!='CreateApply'&&stype==0" type='danger' @click="lookApproveModal('0')">
			  驳回
			</view>
			<view class="option-box box-blue"   v-if="status!='Finished'&&status!='CreateApply'&&stype==0&&comfrimStatus==false" type='blue' @click="lookApproveModal('1')">
				同意
			</view>
			<view class="option-box box-blue"   v-if="status!='Finished'&&status!='CreateApply'&&stype==0&&comfrimStatus" type='blue' @click="lookComfirmModal">
				确认
			</view>
	   	 </view>
	   </view>
	   <remark-Modal ref='remarkModal'></remark-Modal>
	   <approve-modal ref='approveModal'></approve-modal>
	   <comfirm-modal ref='comfirmModal'></comfirm-modal>
	</view>
</template>

<script>
	import Step1 from './purchase/step1.vue'
	import Step2 from './purchase/step2.vue'
	import Step3 from './purchase/step3.vue'
	import remarkModal from '../basic/remarkModal.vue'
	import approveModal from './purchase/apprvoeModal.vue'
	import comfirmModal from './purchase/comfrimModal.vue'
	export default{
		data(){
			return {
				cgId:null,
				pId:null,
				status:null,
				currentStep:'step1',
				stype:1,
				comfrimStatus:false,
				reduceBtn: ['ClerkCheck', 'PurSessionCheif', 'PurchaseBidCheck', 'ChargerDeptChief'],
			}
		},
		components:{
			Step1,
			Step2,
			Step3,
			approveModal,
			remarkModal,
			comfirmModal
		},
		onLoad(options) {
			console.log(options)
		
			this.cgId=options.id;
			this.pId=options.processId;
			this.status=options.status;
			this.stype=options.stype;
			this.comfrimStatus=this.reduceBtn.indexOf(options.status)>-1?true:false;
			console.log(this.stype)
		},
		methods:{
			loadData(){
				
			},
			lookRemark(){
				this.$refs.remarkModal.show(this.pId);
			},
			lookApproveModal(type){
				var data={
					approve:type,
					id:this.cgId,
					processId:this.pId,
					status:this.status
				}
				this.$refs.approveModal.show(data)
			},
			lookComfirmModal(){
				var data={
					id:this.cgId,
					processId:this.pId,
					status:this.status
				}
					this.$refs.comfirmModal.show(data)
			},
			changeModule(e){
				this.currentStep=e.currentTarget.dataset.name
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
		}
	}
</script>

<style lang="scss">
	@import '../../colorui/common.scss';
	.purchase-body {
		padding-top: 160rpx;
		padding-bottom: 96rpx;
	}
  
    .mod-custom-bar {
    	display: flex;
    	flex-direction: row;
    	justify-content: center;
    	color: #fff;
    	line-height: 76rpx;
    	position: fixed;
    	top: 0;
    	left: 0;
    	right: 0;
		opacity: 1;
		z-index: 10;
		height: 76rpx;
    	background: linear-gradient(135deg, rgba(50, 157, 247, 1) 0%, rgba(64, 122, 224, 1) 100%);
    
    	.custom-black {
    		// flex: 0 1 auto;
			color: #fff;
			position: absolute;
			height: 76rpx;
			left: 0;
			top: 0;
			width: 160rpx;
			z-index: 10;
    		color: #fff;
    	}
    
    	.custom-content {
    		flex: 1;
    		color: #fff;
    		text-align: center;
    	}
    }
	.step-bar {
		display: flex;
		flex-direction: row;
		background: #fff;
		justify-content: center;
		height: 84rpx;
		position: fixed;
		top: 76rpx;
		left: 0;
		width: 100%;
        z-index: 10;
		opacity: 1;
		.step-box {
			flex: 1;
			text-align: center;
			line-height: 84rpx;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
		}

		.step-box-active {
			font-size: 30rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: rgba(64, 122, 224, 1);
		}
	}
</style>
